import React from 'react';
import { Tabs } from 'antd';
import { connect } from 'dva';
import ScrollBar from '@/components/ScrollBar';
import ForForm from './ConfigPanel/ForForm';
import ForCard from './ConfigPanel/ForCard';
import ForInput from './ConfigPanel/ForInput';
import ForNumberPicker from './ConfigPanel/ForNumberPicker';
import ForTextArea from './ConfigPanel/ForTextArea';
import ForSelect from './ConfigPanel/ForSelect';
import ForRadioGroup from './ConfigPanel/ForRadioGroup';
import ForCheckboxGroup from './ConfigPanel/ForCheckboxGroup';
import ForSwitch from './ConfigPanel/ForSwitch';
import ForComboGrid from './ConfigPanel/ForComboGrid';
import ForComboModal from './ConfigPanel/ForComboModal';
import ForRangePicker from './ConfigPanel/ForRangePicker';
import ForDatePicker from './ConfigPanel/ForDatePicker';
import ForMonthPicker from './ConfigPanel/ForMonthPicker';
import ForYearPicker from './ConfigPanel/ForYearPicker';
import ForWeekPicker from './ConfigPanel/ForWeekPicker';
import ForSlickUpload from './ConfigPanel/ForSlickUpload';
import ForTreeSelect from './ConfigPanel/ForTreeSelect';
import ForAsync from './ConfigPanel/ForAsync';
import ForStaticText from './ConfigPanel/ForStaticText';
import ForButtonGroup from './ConfigPanel/ForButtonGroup';
import ForRating from './ConfigPanel/ForRating';
import styles from '../styles.less';

const { TabPane } = Tabs;

const switcher = componentType => {
  let result = null;

  switch (`${componentType}`.toLocaleLowerCase()) {
    case 'card':
      result = <ForCard />;
      break;
    case 'async':
      result = <ForAsync />;
      break;
    case 'input':
      result = <ForInput />;
      break;
    case 'numberpicker':
      result = <ForNumberPicker />;
      break;
    case 'textarea':
      result = <ForTextArea />;
      break;
    case 'select':
      result = <ForSelect />;
      break;
    case 'radiogroup':
      result = <ForRadioGroup />;
      break;
    case 'checkboxgroup':
      result = <ForCheckboxGroup />;
      break;
    case 'switch':
      result = <ForSwitch />;
      break;
    case 'combogrid':
      result = <ForComboGrid />;
      break;
    case 'combomodal':
      result = <ForComboModal />;
      break;
    case 'rangepicker':
      result = <ForRangePicker />;
      break;
    case 'datepicker':
      result = <ForDatePicker />;
      break;
    case 'monthpicker':
      result = <ForMonthPicker />;
      break;
    case 'yearpicker':
      result = <ForYearPicker />;
      break;
    case 'weekpicker':
      result = <ForWeekPicker />;
      break;
    case 'slickupload':
      result = <ForSlickUpload />;
      break;
    case 'treeselect':
      result = <ForTreeSelect />;
      break;
    case 'statictext':
      result = <ForStaticText />;
      break;
    case 'buttongroup':
      result = <ForButtonGroup />;
      break;
    case 'rating':
      result = <ForRating />;
      break;
    default:
      result = (
        <div className="middle-item">
          <b className="middle-item-hack" />
          <div className="middle-item-body text-center text-gray">单击组件编辑属性</div>
        </div>
      );
  }
  return result;
};

function Right({ current, formSchema }) {
  const { componentType } = current;

  return (
    <Tabs
      className={styles.tabs}
      renderTabBar={(props, DefaultTabBar) => {
        return <DefaultTabBar {...props} />;
      }}
    >
      <TabPane tab="字段属性" key="1">
        <ScrollBar
          renderView={({ style, ...props }) => {
            const viewStyle = {
              padding: '0 16px',
            };
            return <div style={{ ...style, ...viewStyle }} {...props} />;
          }}
        >
          {switcher(componentType)}
        </ScrollBar>
      </TabPane>
      <TabPane
        tab="表单属性"
        key="2"
        disabled={!Array.isArray(formSchema) || formSchema.length === 0}
      >
        <ScrollBar
          renderView={({ style, ...props }) => {
            const viewStyle = {
              padding: '0 16px',
            };
            return <div style={{ ...style, ...viewStyle }} {...props} />;
          }}
        >
          <ForForm />
        </ScrollBar>
      </TabPane>
    </Tabs>
  );
}

export default connect(({ formDesigner }) => ({
  current: formDesigner.current,
  formSchema: formDesigner.formSchema,
}))(Right);
